<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <c-select
          clearable
          v-model="params['is_rural_dev.eq']"
          placeholder="项目类型"
          @change="getAllData()"
          :options="{
            1: '乡村振兴贷',
            0: '黔农十二贷',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['channel_type.eq']"
          placeholder="产品名称"
          @change="getAllData()"
          :options="{
            0: '存量业务',
            1: '增量业务',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="{ 0: '否', 1: '是' }"
          v-model="params['is_history.eq']"
          placeholder="是否历史数据"
          @change="getAllData()"
          clearable
        ></c-select>
      </el-form-item>

      <el-form-item>
        <c-select
          placeholder="是否银行直连"
          @change="getAllData()"
          :options="{
            0: '否',
            1: '是',
          }"
          v-model="params['is_dir.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-system-enum
          placeholder="银行类型"
          filterable
          type="bankClass"
          clearable
          @change="getAllData()"
          v-model="params['bank_type.eq']"
        ></select-system-enum>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="审批状态"
          :options="enumReviewApprovalSelect"
          v-model="params['review_approval.in']"
          clearable
          @change="getAllData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="项目状态"
          :options="{
            1: '新增(本年1月至今)',
            2: '在保',
            3: '解保',
            4: '代偿',
          }"
          v-model="projectStatus"
          clearable
          @change="setProjectParams"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="新增日期(含)"
          end-placeholder="新增日期(含)"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate1"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="审批时间(含)"
          end-placeholder="审批时间(含)"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery1"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="区域查询"
          :topValue="'52'.padEnd(12, 0)"
          :bottomLevel="2"
          clearable
          @change="getAllData()"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <c-select
          placeholder="资料状态"
          :options="{
            0: '未完善',
            1: '已完善',
          }"
          v-model="params['datum_status.eq']"
          clearable
          @change="getAllData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getAllData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          项目共计：
          <span class="text-danger">{{ tableCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          万元
        </span>
      </div>
    </div>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
      @row-click="selectRow"
    ></c-table>

    <detail-dialog
      :visible.sync="viewVisible"
      :other-params="viewParams"
      :title="viewTitle"
    ></detail-dialog>
  </div>
</template>

<script>
import { getEnum } from '@/cadmin/components/select/enum'
import { enumReviewApprovalSelect } from '@/bank/views/limit/index'
import SelectSystemEnum from '@/cadmin/components/select/SelectSystemEnum'
import DetailDialog from '@/cadmin/views/count/DetailDialog'
import SelectAddress from '@/components/select/SelectAddress'
export default {
  components: {
    SelectSystemEnum,
    DetailDialog,
    SelectAddress,
  },
  data() {
    return {
      enumReviewApprovalSelect,
      loading: false,
      tableName: 'datum_one_county_industry',
      tableData: [],
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'bankTypeName' } },
        { attrs: { label: '项目数', prop: 'p' } },
        { attrs: { label: '担保金额', prop: 'p1' } },
      ],
      params: {
        groupFields: 'bank_type',
        fields: ['bank_type'],
        groupFunc:
          'count(datum_one_county_industry.customer_related_id),round(sum(warranty_amount)|2)',
        'review_approval.in': '4,5,6,7',
        create_time: '',
      },
      serviceName: '',
      seachParams: {},
      bankTypeName: {},
      viewVisible: false,
      viewTitle: '',
      viewParams: {},
      countLoading: false,
      tableCount: 0,
      tableFunds: 0,
      projectStatus: '',

      queryDate: [],
      queryDate1: [],
    }
  },

  created() {
    this.getEnumData()
    this.getCountData()
  },
  methods: {
    getAllData() {
      this.getData()
      this.getCountData()
    },
    getSelectDates(data) {
      if (!data || !data.length) {
        return ['', '']
      }
      let startTime = ''
      let endTime = ''
      const date = new Date(data[0])
      startTime = date
        ? `${date.getFullYear()}-${(date.getMonth() + 1 + '').padStart(2, 0)}-${date.getDate()}`
        : ''
      endTime = date
        ? `${new Date(data[1]).getFullYear()}-${(new Date(data[1]).getMonth() + 1 + '').padStart(
            2,
            0
          )}-${new Date(data[1]).getDate() + 1}`
        : ''
      return [startTime, endTime]
    },
    handleDateQuery1() {
      const dates = this.getSelectDates(this.queryDate1)

      this.params['approval_time.gte'] = dates[0]
      this.params['approval_time.lt'] = dates[1]
      this.getAllData()
    },
    handleDateQuery() {
      const dates = this.getSelectDates(this.queryDate)

      this.params['create_time.gte'] = dates[0]
      this.params['create_time.lt'] = dates[1]
      this.getAllData()
    },
    setProjectParams(status) {
      this.seachParams = {}
      switch (+status) {
        case 1:
          this.seachParams['create_time.gte'] = `${new Date().getFullYear()}-01-01 00:00:00`
          break
        case 2:
          this.seachParams['review_approval.eq'] = 4
          break
        case 3:
          this.seachParams['review_approval.in'] = '5,6,7'
          break
        case 4:
          this.seachParams['is_compens.eq'] = 1
          break
        default:
          break
      }

      this.getAllData()
    },
    selectRow(row) {
      this.viewVisible = true
      this.viewTitle = row.bankTypeName || '' + '项目详情'
      this.viewParams = {
        ...this.params,
        ...this.seachParams,
        fields: '',
        groupFields: '',
        groupFunc: '',
        'bank_type.eq': row.bank_type || '',
      }
    },
    getEnumData() {
      getEnum('bankClass')
        .then(res => {
          this.bankTypeName = res?.enum ?? {}
        })
        .finally(() => {
          this.getData()
        })
    },
    getCountData() {
      this.$api
        .getData(
          'credit',
          this.tableName,
          { ...this.params, ...this.seachParams, groupFields: '' },
          { bank_type: 'asc' }
        )
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableCount = data.p || 0
          this.tableFunds = data.p1 || 0
        })
    },
    getData() {
      this.loading = true
      this.$api
        .getData(
          'credit',
          this.tableName,
          { ...this.params, ...this.seachParams },
          { bank_type: 'asc' }
        )
        .then(res => {
          this.tableData = (res.data || []).map(item => {
            item.bankTypeName = this.bankTypeName[item.bank_type]
            return item
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
